<template>
    <div>
        <a-form style="margin-top: 10px;margin-left: 5px;" :layout="'inline'">
            <a-form-item label="文章标题">
                <a-input v-model:value="searchParams.title" placeholder="请输入问题标题" allowClear/>
            </a-form-item>
            <a-form-item label="内容等级">
                <a-select
                        ref="select"
                        v-model:value="searchParams.grade"
                        placeholder="请选择内容等级"
                        style="width: 150px"
                        allowClear
                >
                    <a-select-option value="1">初级</a-select-option>
                    <a-select-option value="2">中级</a-select-option>
                    <a-select-option value="3">高级</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="请选择时间">
                <a-range-picker v-model:value="searchParams.date" valueFormat="YYYY-MM-DD"/>
            </a-form-item>
            <a-form-item>
                <a-button @click="search" type="primary">
                    <template #icon>
                        <SearchOutlined/>
                    </template>
                    搜索
                </a-button>
                <a-button @click="resetSearch" class="main_rest">
                    <template #icon>
                        <SyncOutlined/>
                    </template>
                    重置
                </a-button>
            </a-form-item>
        </a-form>
        <div class="main_operation">
            <a-button @click="handleAdd" class="main_operation_item" type="primary">
                新增
                <template #icon>
                    <PlusOutlined/>
                </template>
            </a-button>
            <a-button @click="handleEdit" :disabled="single" class="main_operation_edit">
                <template #icon>
                    <EditTwoTone/>
                </template>
                修改
            </a-button>
            <a-button @click="handleDelete" :disabled="multiple" class="main_operation_item" type="primary" danger>
                <template #icon>
                    <DeleteTwoTone/>
                </template>
                删除
            </a-button>
            <a-button @click="handleExportArticle" class="main_operation_export">
                <template #icon>
                    <VerticalAlignBottomOutlined/>
                </template>
                导出
            </a-button>
        </div>
    </div>

    <div>
        <a-table :row-selection="rowSelection" :columns="columns" :data-source="articleList" :pagination="pagination"
                 row-key="id" style="word-break: break-all;">
            <template v-slot:bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'avatar'">
                    <a-image :src="record.avatar" style="width: 130px;height: 130px;" alt="头像"/>
                </template>
                <template v-if="column.dataIndex === 'operation'">
                    <div>
          <span>
            <a-button @click="handleEdit(record.id)" class="main_operation_button" type="primary" ghost>修改</a-button>
            <a-button @click="handleDelete(record)" class="main_operation_button"
                      danger>删除</a-button>
          </span>
                    </div>
                </template>
            </template>
        </a-table>
    </div>
</template>

<script setup lang="ts">
import {Form, message, TableColumnType} from "ant-design-vue";
import {reactive, ref} from "vue";
import {exportArticle, getArticleList, searchArticle} from "@/api/article";
import {
    DeleteTwoTone,
    EditTwoTone, PlusOutlined,
    SearchOutlined,
    SyncOutlined,
    VerticalAlignBottomOutlined
} from "@ant-design/icons-vue";

interface DataType {
    key: string;
    id: number;
}

//标签
const columns: TableColumnType<DataType>[] = [
    {
        title: '文章标题',
        align: "center",
        width: 200,
        dataIndex: 'title',
    },
    {
        title: '浏览量',
        align: "center",
        width: 150,
        dataIndex: 'views',
    },
    {
        title: '评论数',
        align: "center",
        width: 150,
        dataIndex: 'commentCount',
    },
    {
        title: '点赞数',
        align: "center",
        dataIndex: 'likeCount',
    },
    {
        title: '收藏数',
        align: "center",
        dataIndex: 'collectCount',
    },
    {
        title: '内容等级',
        align: "center",
        dataIndex: 'grade',
        customRender: (text: any) => {
            if (text.value === 2) {
                return text.value === 1 ? '初级' : '中级';
            } else {
                return text.value === 1 ? '初级' : '高级';
            }
        }
    },
    {
        title: '创建时间',
        align: "center",
        dataIndex: 'createTime',
    },
    {
        title: '更新时间',
        align: "center",
        dataIndex: 'updateTime',
    },
    {
        title: '操作',
        align: "center",
        dataIndex: 'operation',
    },
];

//选中的id数组
const ids = ref<number[]>([])
//非单个禁用
const single = ref<boolean>(true)
//是否多选
const multiple = ref<boolean>(true)

//多选框
const rowSelection = {
    onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
        ids.value = selectedRows.map(item => item.id)
        single.value = ids.value.length !== 1
        multiple.value = !ids.value.length
    }
};

//是否显示修改对话框
const visible = ref<boolean>(false);
//对话框标题
const title = ref("")

//问题信息
const article = ref({
    id: '',
    title: '',
    views: 0,
    commentCount: 0,
    likeCount: 0,
    collectCount: 0,
    grade: 0,
    type: 0,
})

//表单校验
const rulesRef = reactive({
    title: [
        {
            required: true,
            message: '请输入文章标题',
        }
    ],
    userId: [
        {
            required: true,
            message: '请输入发布人',
        }
    ],
    nickname: [
        {
            required: true,
            message: '请输入发布人昵称',
        }
    ],
    avatar: [
        {
            required: true,
            message: '请输入发布人头像',
        }
    ],
});

const useForm = Form.useForm;
const {validate, validateInfos} = useForm(article, rulesRef);

//文章列表
const articleList = ref()

//分页参数
const pagination = ref({
    size: 'large',
    current: 1,
    pageSize: 10,
    total: 0,
    pageSizeOptions: ['10', '20', '30'],
    showTotal: (total: number) => {
        return " 共" + total + "条"
    },
    showSizeChanger: true,
    onShowSizeChange: (current: number, pageSize: number) => {
        pagination.value.pageSize = pageSize
        search()
    },
    onChange: (current: number) => {
        pagination.value.current = current
        search()
    }
})

//搜索参数
const searchParams = ref({
    title: '',
    grade: '',
    startTime: '',
    endTime: '',
    date: null as any
})

//获取所有文章
const handleArticleList = () => {
    getArticleList(pagination.value.current, pagination.value.pageSize).then((res) => {
        articleList.value = res.data.data.map.list
        pagination.value.total = res.data.data.map.total
    })
}

//搜索表单重置
const resetSearch = () => {
    searchParams.value.title = ''
    searchParams.value.grade = ''
    searchParams.value.startTime = ''
    searchParams.value.endTime = ''
    searchParams.value.date = null as any
    handleArticleList()
}

//搜索
const search = () => {
    if (searchParams.value.date != null) {
        searchParams.value.startTime = searchParams.value.date[0]
        searchParams.value.endTime = searchParams.value.date[1]
    }
    searchArticle(searchParams.value).then((res) => {
        articleList.value = res.data.data.list
        pagination.value.total = res.data.data.list.length
        console.log(res.data.data.list.length)
    })
}

//导出
const handleExportArticle = () => {
    exportArticle().then((response) => {
        message.success("导出成功")
        let blob = new Blob([response.data], {
            //要与后端对应
            type: 'application/vnd.ms-excel'
        });
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = '问题列表.xlsx';
        link.click();
        //释放内存
        window.URL.revokeObjectURL(link.href)
    })
}

handleArticleList()
</script>

<style scoped lang="less">
.main_operation {
  margin: 10px;
  display: flex;

  .main_operation_item {
    margin-right: 10px;
  }

  .main_operation_edit {
    background-color: palegreen;
    margin-right: 10px;
  }

  .main_operation_export {
    background-color: sandybrown;
    margin-right: 10px;
  }
}

.main_rest {
  margin-left: 5px;
}

.main_operation_button {
  margin: 5px;
}

:deep(.ant-form-item-control-input-content) {
  margin-bottom: 5px;
}
</style>